<template>
	<view>
		<view class="search"><u-search placeholder="520元礼包抢先领" shape="square" actionText="取消" @custom="remo"></u-search></view>

		<view class="lsjl"><history></history></view>
		<hot></hot>
	</view>
</template>

<script>

import {ApiGetSearchData} from "@/utils/api.js"
// 在这里引入
import { mapActions,mapState} from "vuex"
	export default {
		data() {
			return {
				defaultKeyword:[],
				hotKeywordList:[],
				historyKeywordList:[]
			};
		},
		// 因为state是数据所以写在计算属性
		computed:{
			// 可以对象写法
			// 这样可以直接调用里面的数据
			// ...mapState({
			// 	secrch:(state)=>state.secrch
			// })
			// 数组写法
			...mapState(['secrch'])
		},
		methods:{
			...mapActions(['ActionsApiGetSearchData']),
			remo(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			}
		},
		mounted() {
			// console.log(this.secrch,"vuex里面的数据")
		},
		updated() {
			// 拿到了要在更新后,一样的
			// console.log(this.secrch,"vuex里面的数据")
			// 原生写法 ye一样的
			// console.log(this.$store.state.secrch,"vuex里面的数据")
			let ret=this.$store.state.secrch
			console.log(ret,'1')//这里
			this.defaultKeyword=ret.defaultKeyword

			this.hotKeywordList=ret.hotKeywordList
			// console.log(this.hotKeywordList,'2')//还有这样两个
			this.historyKeywordList=ret.historyKeywordList
		},
		 onLoad() {
			this.ActionsApiGetSearchData()
			
		
		}
	}
</script>

<style lang="less">
page {
	background-color: #efefef;
}
.search {
	padding: 20rpx 24rpx;
	background-color: #fff;
}
.lsjl {
	margin-bottom: 40rpx;
}
</style>
